<template>
	<div>
		<el-row style="margin-bottom: 5px;">
			<el-col :span="10">

				<el-input v-model="searchForm.name" placeholder="请输入客户姓名"></el-input>
			</el-col>
			<el-col :span="6">
				<el-button type="primary" round @click="search()">搜索</el-button>
			</el-col>
			<el-col :span="6">
				<el-button type="primary" round @click="add()">添加</el-button>
			</el-col>
		</el-row>


		<el-table :data="tableData" border style="width: 100%" size="mini" :loading="true">
			<el-table-column prop="name" label="客户姓名"> </el-table-column>
			<el-table-column prop="gender" label="性别"> </el-table-column>
			<el-table-column prop="age" label="年龄"> </el-table-column>
			<el-table-column prop="idcard" label="身份证号"> </el-table-column>
			<el-table-column prop="roomno" label="房间号"> </el-table-column>
			<el-table-column prop="floor" label="所属楼房"> </el-table-column>
			<el-table-column prop="archives" label="档案号"> </el-table-column>
			
			  <el-table-column label="操作">
			      <template slot-scope="scope">
			        <el-button
			          size="mini"
			          @click="handleEdit(scope.row.id)">编辑</el-button>
			        <el-button
			          size="mini"
			          type="danger"
					   @click="handleDel(scope.row.id)"
			          >删除</el-button>
			      </template>
			    </el-table-column>
		</el-table>
		
		
		<el-pagination
		  background
		  layout="prev, pager, next"
		  :total="page.total"
		  :current-page.sync="searchForm.current"
		  @current-change="list()"
		  >
		</el-pagination>
			
		<el-dialog
		  title="客户管理"
		  :visible.sync="dialogVisible"
		  width="500px"
		  >
		  
		  <UserEdit :id="id"  :visible.sync="dialogVisible" v-if="dialogVisible" @flush="search()"></UserEdit>
		  
		  
		</el-dialog>


	</div>
</template>

<script>
	import UserEdit from './edit.vue'
	export default {
		name: 'Customer',
		components:{
			UserEdit
		},
		data() {
			return {
				dialogVisible:false,
				searchForm: {
					current:1,
					size:10,
					name: ''
				},
				page:{
					total:0
				},
				tableData: []
			}
		},
		methods: {
			handleDel(id){
				
				this.$confirm("确认删除?", "删除").then(()=>{
					let url = '/api/customer/deleteById';
					this.http.get(url, (success) => {
						this.$message({
							message: '删除成功',
							type: 'success'
						});
						
						this.list();
						
					}, {id:id})
					
				}).catch(()=>{
					alert("点击了取消")
				})
				
			},
			handleEdit(id){				
				this.id = id;
				this.dialogVisible = true;
			},
			add(){
				//打开添加的页面
				this.id = null;
				this.dialogVisible = true;
			},
			search() {
				//让页号到1
				this.searchForm.current=1
				this.list();
			},
			list() {
				let url = '/api/customer/page';
				this.http.get(url, (page) => {
					// console.log("模块中的list",list) ;// 后端返回的集合
					this.tableData = page.records;
					this.page.total = page.total
				}, this.searchForm)
			}
		},
		created() {
			this.list()
		}
	}
</script>

<style>
</style>
